<template>
  <!-- <div class="hotgoods">
    <div class="hg_t">热卖商品</div>
    <van-grid :column-num="2" :border="false">
      <van-grid-item v-for="item of hotgoods" :key="item.goodsId">
        <router-link :to="{path:'/details',query:{id:item.goodsId}}">
          <van-image :src="$filterImage(item.image)" />
          <div class="hg_n">{{item.name}}</div>
          <div class="hg_p">￥{{item.price.toFixed(2)}}</div>
        </router-link>
      </van-grid-item>
    </van-grid>
  </div>-->
  <div class="hotGoods">
    <h2>热卖商品</h2>
    <div class="content">
      <ul class="clearFix">
        <li v-for="item of hotGoods" :key="item.goodsId">
          <router-link :to="{path:'/details',query:{id:item.goodsId}}">
            <van-image class="image" :src="$filterImage(item.image)" laze-load>
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>

            <p class="name">{{item.name}}</p>
            <p class="price">{{item.price | toFixed | rmb}}</p>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotGoods: []
    };
  },
  created() {
    this.$eventBus.$on("getIndexInfo", res => {
      //console.log(res);
      this.hotGoods = res.hotGoods;
    });
  }
};
</script>

<style lang="scss">
@import "@/style/home/hotGoods.scss";
.name,.price{
  color: #000;
  background-color: #fff;
}
.name{
  margin-top: -4px;
}
</style>